<template>
  <view class="form-record-card" :style="{ padding: padding }" @click="emits('click')">
    <view class="card-left">
      <view class="card-info">
        <TImage
          :src="avatarImage"
          width="80rpx"
          height="80rpx"
          errorImgType="person"
          borderRadius="80rpx"
        ></TImage>
        <view class="info">
          <view class="name-no">
            <text class="name">{{ name }}</text>
          </view>
          <text class="date-time">提交时间：{{ dateTimeStr }}</text>
        </view>
      </view>
    </view>

    <slot name="right">
      <view class="query-btn" @click.stop="handleDetai">查看</view>
    </slot>
  </view>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import TImage from '@/components/TImage/index.vue';
  export interface ITag {
    text: string;
    backgroundColor: string;
    textColor: string;
  }
  defineProps({
    avatarImage: propTypes.string.def(''),
    name: propTypes.string.def(''),
    dateTimeStr: propTypes.string.def(''),
    padding: propTypes.string.def('32rpx'),
  });
  const emits = defineEmits(['detail', 'click']);

  const handleDetai = () => {
    emits('detail');
  };
</script>
<style lang="scss" scoped>
  .form-record-card {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16rpx;
    .card-left {
      display: flex;
      flex-direction: column;
      gap: 24rpx;

      .card-info {
        display: flex;
        gap: 24rpx;
        align-items: center;

        .info {
          display: flex;
          flex-direction: column;
          gap: 8rpx;
          .name-no {
            display: flex;
            align-items: center;
            gap: 24rpx;
            .name {
              font-size: 28rpx;
              line-height: 40rpx;
            }
          }
          .date-time {
            color: #999996;
            font-size: 24rpx;
            line-height: 32rpx;
          }
        }
      }
    }
    .query-btn {
      padding: 8rpx 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      line-height: 32rpx;
      background-color: #f2f3f5;
      border-radius: 24rpx;
    }
  }
</style>
